<template>
  <div class="wrapper">
    <v-head></v-head>
    <v-sidebar v-on:path-change="pathChange"></v-sidebar>
    <div class="content-box" :class="{ 'content-collapse': collapse }">
      <div class="breadcrumb">
        <el-breadcrumb separator="/">
          <el-breadcrumb-item v-for="item in breads" :key="item.index">{{
            item.title
          }}</el-breadcrumb-item>
        </el-breadcrumb>
      </div>
      <div class="content">
        <main-content></main-content>
      </div>
    </div>
  </div>
</template>

<script>
import bus from "../../utils/bus";
import vHead from "./Head";
import vSidebar from "./Sidebar";
import MainContent from "./MainContent";
export default {
  data() {
    return {
      collapse: false,
      breads: []
    };
  },
  components: {
    vHead,
    vSidebar,
    MainContent
  },
  methods: {
    pathChange(arr) {
      this.breads = arr;
    }
  },
  created() {
    bus.$on("collapse", msg => {
      this.collapse = msg;
    });
  }
};
</script>

<style lang="scss">
.wrapper {
  .content {
    height: calc(100% - 49px);
    min-width: 1136px;
  }
  .content-box {
    position: absolute;
    left: 230px;
    right: 0;
    top: 70px;
    bottom: 0;
    overflow-y: scroll;
    padding: 0 50px;
    transition: left 0.3s ease-in-out;
    .breadcrumb {
      padding: 25px 0 10px 0;
      margin-bottom: 10px;
    }
  }
  .content-collapse {
    left: 65px;
  }
}
</style>
